<template>
  <div class="tournament-card">
    <div
      v-for="(item, index) in props.tournaments"
      :key="index"
      class="tournament-item"
      @click="toEventDetail(item)" 
    >
      <div class="left-section">
        <p class="round">{{ item?.game_type === 49 ? t('club_page_49') : t('club_page_47')}}</p>
        <p class="prize">
          {{ t('club_page_jiangjin') }}<br /><span>{{ convert2DisplayMoney(item.bonus) }}</span>
        </p>
      </div>
      <div class="middle-section">
        <p class="title">{{ item.tournm_name }}</p>
        <p class="details">{{ t('club_page_sTime') }} {{ item.begin_time?.month + '-' + item.begin_time?.day + ' ' + item.begin_time?.hour + ':' + item.begin_time?.minute + ':'+ item.begin_time?.second }}</p>
        <!-- <p class="details">开始时间：{{ formatDate(item.begin_time) }}</p> -->
        <p class="details">
          <span class="details_buyIn">{{ t('club_page_pay') }}：{{ convert2DisplayMoney(item.need_chip) }}</span>
          <span class="details_people">
            <img src="/imgs/club/people.png" alt="people-icon" />
            {{ item.apply_count }}
          </span>
        </p>
      </div>
      <div class="right-section" :class="getStatusClass(item.tournm_state)">
        <!-- 状态显示 -->
        <div
          v-if="item.tournm_state !== 5"
          class="status"
          :class="getStatusClass(item.tournm_state)"
        >
          <template v-if="item.tournm_state === 0">{{ t('club_page_baomingfs') }}</template>
          <template v-if="item.tournm_state === 1">{{ t('club_page_yanchibm') }}</template>
          <template v-if="item.tournm_state === 2">{{ t('club_page_jinru') }}</template>
          <template v-if="item.tournm_state === 3">{{ t('club_page_jinxingzhong') }}</template>
          <template v-else-if="item.tournm_state === 4">{{ t('club_page_yizhanting') }}</template>
        </div>

        <!-- 状态内容 -->
        <div class="status-cont" :class="getStatusClass(item.tournm_state)">
          <span class="status-cont-not" v-if="item.tournm_state === 0">{{ t('club_page_weikaishi') }}</span>
          <span class="status-cont-delayed" v-else-if="item.tournm_state === 1">
            {{ t('club_page_juliguanbi') }}<br />
            <p>{{ formatTime(countdowns[item.room_id]) }}</p>
          </span>
          <span class="status-cont-enter" v-else-if="item.tournm_state === 2">
            {{ t('club_page_julikaishi') }}<br />
            <p>{{ formatTime(countdowns[item.room_id]) || '00:00:00' }}</p>
          </span>
          <span class="status-cont-active" v-else-if="item.tournm_state === 3">
            <!-- <iconpark-icon name="time" size="10" /> -->
            <img src="/imgs/club/time.webp" alt="" />
            <p>{{ formatTime(countdowns[item.room_id]) }}</p>
          </span>
          <span class="status-cont-paused" v-else-if="item.tournm_state === 4">
            {{ t('club_page_shenyushijian') }}<br />
            <p>{{ formatTime(countdowns[item.room_id]) }}</p>
          </span>
          <span class="status-cont-ended" v-else-if="item.tournm_state === 5">{{ t('club_page_yijieshu') }}</span>
        </div>

      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { convert2DisplayMoney } from "@/utils/useStoreMethods";
const router = useRouter();
import { useI18n } from "vue-i18n";
const { t } = useI18n();
// Props 接收比赛数据
const props = defineProps<{
  tournaments: any[];
}>();


console.log('props.tournaments', props.tournaments)
// const gameClubIds: any = ref({
//   49: '德州',
//   47: '跑得快',
// })

/**
 * 状态对应数字含义：
 * 0: 未报名 not-started
 * 1: 延迟报名 delayed
 * 2: 已报名-未开始 enter
 * 3: 已报名-已开始/进行中 active
 * 4: 已暂停 paused
 * 5: 已结束 ended
 */
// 根据状态返回对应的类名
const getStatusClass = (status: number) => {
  switch (status) {
    case 0:
      return "not-started";
    case 1:
      return "delayed";
    case 2:
      return "enter";
    case 3:
      return "active";
    case 4:
      return "paused";
    case 5:
      return "ended";
    default:
      return "not-started";
  }
};

const countdowns = ref<any>({}); // 存储各房间的倒计时或计时秒数
let timer: string | number | NodeJS.Timeout | null | undefined = null; // 定时器

// 格式化日期
// const formatDate = (date: any) => {
//   return `${date.month}-${date.day} ${date.hour}:${date.minute}:${date.second}`;
// };

// 格式化时间为 HH:mm:ss
const formatTime = (seconds: number) => {
  if (seconds < 0) seconds = 0; // 确保秒数不为负
  const hours = String(Math.floor(seconds / 3600)).padStart(2, '0');
  const minutes = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
  const secs = String(seconds % 60).padStart(2, '0');
  return `${hours}:${minutes}:${secs}`;
};

// 启动定时器，处理计时和倒计时
const startTimer = () => {
  timer = setInterval(() => {
    props.tournaments.forEach((item) => {
      if (item.tournm_state === 3) {
        // 计时
        countdowns.value[item.room_id] = (countdowns.value[item.room_id] || 0) + 1;
      } else if (item.tournm_state !== 5) {
        // 倒计时
        countdowns.value[item.room_id] = (countdowns.value[item.room_id] || item.countdown) - 1;
        if (countdowns.value[item.room_id] < 0) {
          countdowns.value[item.room_id] = 0; // 倒计时不能为负数
        }
      }
    });
  }, 1000);
};

// 停止定时器
const stopTimer = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};

// 初始化倒计时/计时数据
onMounted(async () => {
  props.tournaments.forEach((item) => {
    countdowns.value[item.room_id] = item.countdown || 0;
  });
  await startTimer();
});

const toEventDetail = (item: any) => {
  router.push({
    path: "/club/eventDetails",
    query: {
      roomId: item.room_id,
    },
  });
}

onUnmounted(() => {
  stopTimer();
});

onMounted(() => {
});
</script>


<style lang="scss" scoped>
.tournament-card {
  width: 347px;
  margin: 0 auto 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  // padding: 10px;

  .tournament-item {
    width: 347px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(19, 18, 50, 0.00) 0%, #2F2D6C 100%), #131232;
    box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
    color: #fff;

    .left-section {
      flex: 1;
      text-align: center;

      .round {
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        font-weight: 400;
        color: #f39c12;
        margin-bottom: 2px;
      }
      .prize {
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        
        span {
          display: block;
          margin-top: 6px;
          color: #F3C552;
          font-size: 12px;
          font-weight: 600;
        }
      }
    }

    .middle-section {
      flex: 2;
      padding: 0 10px;
      font-size: 12px;
      color: #A8A8CA;
      .title {
        height: 22px;
        color: #FFF;
        font-size: 12px;
        font-weight: 500;
        line-height: 28px;
        text-indent: 25px;
        background: url(/imgs/club/eventBg.png) no-repeat;
        background-size: 100% 100%;
      }
      
      .details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 4px 0 0px;
        width: 138px;
        white-space: nowrap;       /* 不换行 */
        overflow: hidden;          /* 隐藏超出内容 */
        text-overflow: ellipsis;   /* 显示省略号 */

        .details_people {
          color: #1DBA8B;
          font-size: 12px;
          img {
            width: 16px;
            height: 16px;
            vertical-align: bottom;
          }
        }
      }
    }

    .right-section {
      width: 90px;
      height: 62px;
      text-align: center;
      border-radius: 8px;
      background: #0A0B27;

      .status {
        height: 20px;
        font-size: 14px;
        color: #fff;

        &.not-started {
          background-color: #1DBA8B;
        }
        &.active {
          background-color: #F49A24;
        }
        &.enter {
          background-color: #8361FF;
        }
        &.delayed {
          background-color: #DF393D;
        }
        &.paused {
          background-color: #7B79BD;
        }
        &.ended {
          background-color: #B2B2B2;
        }
      }

      .status-cont {
        height: 38px;
        font-size: 12px;
        .status-cont-not {
          line-height:38px;
        }
        .status-cont-active {
          line-height:14px;
          img {
            width: 16px;
            height: 16px;
          }
        }
        .status-cont-ended {
          display: block;
          line-height:62px;
        }
        &.not-started {
          color: #1DBA8B;
        }
        &.active {
          color: #F49A24;
        }
        &.enter {
          color: #8361FF;
        }
        &.delayed {
          color: #DF393D;
        }
        &.paused {
          color: #7B79BD;
        }
        &.ended {
          color: #B2B2B2;
        }

        p {
          font-size: 18px;
        }
      }

      &.not-started {
        border: 3px solid #1DBA8B;
      }
      &.active {
        border: 3px solid #F49A24;
      }
      &.enter {
          border: 3px solid #8361FF;
      }
      &.delayed {
        border: 3px solid #DF393D;
      }
      &.paused {
        border: 3px solid #7B79BD;
      }
      &.ended {
        border: 3px solid #B2B2B2;
      }
    }
  }
}
</style>
